<!DOCTYPE html>
<html>
  <head>
    <title>core-animation</title>
    <script src="../platform/platform.js"></script>
    <link rel="import" href="core-animation.html">
    <link rel="import" href="core-animation-group.html">

<!--     <link rel="import" href="polymer-blink.html">
    <link rel="import" href="polymer-bounce.html">
    <link rel="import" href="polymer-fadein.html">
    <link rel="import" href="polymer-fadeout.html">
    <link rel="import" href="polymer-flip.html">
    <link rel="import" href="polymer-shake.html">
 -->    
    <style>
      body {
        text-align: center;
        font-family: Helvetica, sans-serif;
      }
      div#target {
        display: inline-block;
        background-color: dimgrey;
        border-radius: 5px;
        padding: 5px 10px;
        margin: 50px;
        font-size: 30px;
        color: white;
      }
      div.animations > * {
        display: inline-block;
        background-color: darkgrey;
        border-radius: 5px;
        padding: 5px 10px;
        margin: 5px;
        color: white;
      }
    </style>
  </head>
  <body>

    <div id="target">animated!</div>

    <div class="animations">

      <core-animation id="raw" duration="1000">
        raw
        <core-animation-keyframe>
          <core-animation-prop name="opacity" value="1">
          </core-animation-prop>
        </core-animation-keyframe>
        <core-animation-keyframe>
          <core-animation-prop name="opacity" value="0.3">
          </core-animation-prop>
        </core-animation-keyframe>
        <core-animation-keyframe>
          <core-animation-prop name="opacity" value="1">
          </core-animation-prop>
        </core-animation-keyframe>
      </core-animation>

      <core-animation-group type="seq">
        raw group
        <core-animation duration="300">
          <core-animation-keyframe>
            <core-animation-prop name="opacity" value="1">
            </core-animation-prop>
          </core-animation-keyframe>
          <core-animation-keyframe>
            <core-animation-prop name="opacity" value="0.3">
            </core-animation-prop>
          </core-animation-keyframe>
          <core-animation-keyframe>
            <core-animation-prop name="opacity" value="1">
            </core-animation-prop>
          </core-animation-keyframe>
        </core-animation>
        <core-animation duration="300">
          <core-animation-keyframe>
            <core-animation-prop name="transform" value="scale(1)">
            </core-animation-prop>
          </core-animation-keyframe>
          <core-animation-keyframe>
            <core-animation-prop name="transform" value="scale(1.2)">
            </core-animation-prop>
          </core-animation-keyframe>
          <core-animation-keyframe>
            <core-animation-prop name="transform" value="scale(1)">
            </core-animation-prop>
          </core-animation-keyframe>
        </core-animation>
      </core-animation-group>

      <core-animation id="custom-animation" duration="500">custom</core-animation>

      <core-animation duration="1000" iterations="Infinity" direction="alternate">
        infinite
        <core-animation-keyframe>
          <core-animation-prop name="opacity" value="1">
          </core-animation-prop>
        </core-animation-keyframe>
        <core-animation-keyframe>
          <core-animation-prop name="opacity" value="0.3">
          </core-animation-prop>
        </core-animation-keyframe>
      </core-animation>
<!--       <polymer-bounce duration="1000">bounce</polymer-bounce>
      <polymer-shake>shake</polymer-shake>
      <polymer-flip>flip X</polymer-flip>
      <polymer-flip axis="y">flip Y</polymer-flip>
      <polymer-blink>blink</polymer-blink>
      <polymer-fadein>fade in</polymer-fadein>
 -->    </div>
    <script>
      var customAnimationFn = function(timeFraction, target) {
        if (timeFraction < 1) {
          target.textContent = timeFraction;
        } else {
          target.textContent = 'animated!';
        }
      };

      document.addEventListener('polymer-ready', function() {
        document.querySelector('.animations').addEventListener('click',
          function(e) {
            var animation = e.target;
            if (animation.id === 'custom-animation') {
              animation.customEffect = customAnimationFn;
            }
            animation.target = target;
            animation.play();
          });
          document.getElementById('raw').addEventListener(
            'core-animation-finish', function(e) {
              console.log('finish!');
            });
      });
    </script>
  </body>
</html>
